vue入门笔记体系（三）vue数据绑定

vue数据绑定

简单数据绑定

<div id="counter-app">
  <h1>已续命{{count}}</h1>
    <p>{{isActive?"active":""}}</p> //简单运算符
    <p>{{Date.now()}}</p> //可以调用原生js全局变量，但不可以调用自己定义的全局变量
    <p v-html="html"></p> //绑定html内容
    <p :id="ID"></p>    //绑定属性数据
    <p @click="handleClick"></p>//绑定事件
  <button @click="count++">喜+1</button>
</div>

<script>
  var counterApp = new Vue({
    el: '#counter-app',
    data: {
      count: 0,
      isActive:false,
      html:'<span>123</span>',
      ID:"main"
    },
    methods:{
        handleClick(){
            console.log('click')
        }
    }
  })
</script>

class&style绑定

<div id="counter-app">
    <p :class="{active:isActive}"></p>//根据isActive来是否添加active类名,对象形式
    <p :class="[isActive?'active':'']"></p>//根据isActive来是否添加active类名，数组形式
    <p :class="[{active:isActive}]"></p>//根据isActive来是否添加active类名，数组和对象结合
    <p :class="[{active:isActive}]" :style="[styles,styles2]"></p>//根据isActive来是否添加active类名，数组和对象结合
</div>

<script>
  var counterApp = new Vue({
    el: '#counter-app',
    data: {
      count: 0,
      isActive:false,
      html:'<span>123</span>',
      ID:"main",
      styles:{  //vue可以自动加上兼容性
          color:red
      },
      styles2:{
          font-size:18px
      }
    },
    methods:{
        handleClick(){
            console.log('click')
        }
    }
  })
</script>